<template>
    <div class="contains">
        <ul>
            <li v-for="item,index in getData" :key="index">
                <div>
                    <a href="#"><img :src="	`https://mfs.ys7.com/${item.goods.image_url}`" alt=""></a>
                    <span>{{item.goods.name}}</span>
                    <span>{{item.create_time.split(" ")[0]}}</span>
                </div>
                <p><span>{{item.user_name}}</span> : {{item.content}}</p>
                <a v-show="item.images.length">
                    <img v-for="itm,idx in item.images" :src="`https://mfs.ys7.com/${itm.img}`" alt="" :key="idx">
                   
                </a>
            </li>
        </ul>
        <p><a href="#">发现更多</a></p>
    </div>
</template>

<script>
    import instance from '../utils/request'
    export default {
        data() {
            return {
                getData: null,
            }
        },
     
        created(){
            instance.post("yingshi/comment/get-public-praise.html").then(res=>{
                this.getData = res.data.data.models;
            })

        },
    }
</script>

<style lang="less" scoped>
    .contains{
        padding: .93rem 0 0rem;
        background: #f8f8f8;
        ul{
            width:100%;
            li{
                width: 100%;
                box-sizing: border-box;
                padding:0 .1rem .2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-top: .1rem;
                background: white;
                div{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: .74rem;
                    a{
                        display: inline-block;
                        width: .46rem;
                        height:.46rem;
                        img{
                            width:100%;
                            height:100%;
                        }
                    }
                    span:nth-child(2){
                        display: inline-block;
                        font-size: .16rem;
                        color:#171717;
                        width:1.85rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    span:nth-child(3){
                        color: #929292;
                        font-size: .12rem;
                        margin: .08rem;
                    }
                }
                p{
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    text-overflow: ellipsis;
                    font-size: .14rem;
                    color:#171717;
                    span{
                        color: #fd4800;
                    }
                }
                a{
                    width: 100%;
                    height: 1.1rem;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-end;
                    img{
                        width:1rem;
                        height: 1rem;
                        margin-right: .15rem;
                    }
                }
            }
        }
        >p{
            height: 1rem;
            text-align: center;
            line-height: 1rem;
            a{
                color:#999;
                text-decoration: underline;
                font-size: .13rem;
            }
        }
    }
</style>